<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>

<body>
<h1 class="at_center">注册</h1>
<hr/>
<br/>

<div class="at_center">
    <form method="get" action="register">
        <table border="1" style="line-height: 25px">
            <tr>
                <th>用户名</th>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <th>密码</th>
                <td><input type="password" name="passwd"/></td>
            </tr>
            <tr>
                <th>性别</th>
                <td>
                    <input type="radio" name="sex" value="male" checked>男
                    <input type="radio" name="sex" value="female">女
                </td>
            </tr>
            <tr>
                <th>角色</th>
                <td>
                    <input type="radio" name="job" value="student" checked>学生
                    <input type="radio" name="job" value="teacher">教师
                </td>
            </tr>
            <tr>
                <th>学院</th>
                <td>
                    <select name="college">
                        <option value="sw" selected>软件学院</option>
                        <option value="cs">计算机学院</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <div>
                        <div style="float: left; text-align: left;">
                            <button type="button" onclick="window.location.href = 'login.html'">返回登录</button>
                        </div>
                        <div style="text-align: right;">
                            <button type="submit">注册</button>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <br/>

    </form>
</div>
</body>
</html>
<style>
    .at_center {
        text-align: -moz-center;
        text-align: -webkit-center;
    }
</style>



<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="static/css/mdui.min.css" crossorigin="anonymous" />
    <script src="static/js/mdui.min.js" crossorigin="anonymous"></script>
    <script src="static/js/http.js" crossorigin="anonymous"></script>
    <title>注册</title>
</head>

<html>

<body class="mdui-theme-primary-indigo mdui-theme-layout-auto mdui-theme-accent-indigo">
    <div class="mdui-card">
        <div class="mdui-progress mdui-hidden" id="mdui_loading">
            <div class="mdui-progress-indeterminate"></div>
        </div>

        <div class="mdui-card-primary mdui-color-theme">
            <div class="mdui-card-primary-title">
                <div style="text-align: center;">HR系统注册</div>
            </div>
        </div>
        <div class="mdui-card-content mdui-p-t-1 mdui-card-primary mdui-color-gray-500">
            <div class="mdui-textfield mdui-textfield-floating-label">
                <i class="mdui-icon material-icons">account_circle</i>
                <div class="mdui-textfield-label">用户名</div>
                <input class="mdui-textfield-input" type="username" id="login_username" required />
                <div class="mdui-textfield-error">请输入用户名</div>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                <i class="mdui-icon material-icons">vpn_key</i>
                <div class="mdui-textfield-label">密码</div>
                <input class="mdui-textfield-input" type="password" id="login_password" required />
                <div class="mdui-textfield-error">请输入密码</div>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                <i class="mdui-icon material-icons">vpn_key</i>
                <div class="mdui-textfield-label">密码</div>
                <input class="mdui-textfield-input" type="password" id="login_password" required />
                <div class="mdui-textfield-error">请输入密码</div>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                <i class="mdui-icon material-icons">vpn_key</i>
                <div class="mdui-textfield-label">密码</div>
                <input class="mdui-textfield-input" type="password" id="login_password" required />
                <div class="mdui-textfield-error">请输入密码</div>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                <i class="mdui-icon material-icons">vpn_key</i>
                <div class="mdui-textfield-label">密码</div>
                <input class="mdui-textfield-input" type="password" id="login_password" required />
                <div class="mdui-textfield-error">请输入密码</div>
            </div>
        </div>

        <div class="mdui-card-actions mdui-card-actions-stacked mdui-p-t-1">
            <button onclick="login()" class="mdui-btn mdui-btn-block mdui-ripple mdui-color-theme ">登录</button>
            <button onclick="window.location.href = 'register.html'" class="mdui-btn mdui-ripple mdui-btn-block mdui-color-cyan-100">注册</button>
        </div>
    </div>
</body>

</html>

<script>
    function login() {
        document.getElementById('mdui_loading').className = 'mdui-progress'
        //普通get请求
        http.get('/', function (err, result) {
            // 这里对结果进行处理
            console.log(result)
            document.getElementById('mdui_loading').className = 'mdui-progress mdui-hidden'
        });
    }
</script>
<style>
    .mdui-card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 88%;
        max-width: 340px;
        max-height: 90%;
        transform: translate(-50%, -50%);
        overflow: auto;
    }

    .mdui-card .mdui-progress {
        position: relative;
        top: 0;
        z-index: 1;
    }

    .mdui-card .mdui-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
</style>
